<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>homePage</title>
  <script type="text/javascript" th:inline="JavaScript"></script>
</head>

<body>
  <div th:fragment="chat" class="chatStyleBox">
    <!-- 墙门管理模态框 -->
    <div class="cd-popup3 chat-pop" id="chatModal">
      <div class="cd-popup-container3 manageModal chatStyle">
        <div class="chat-title">小熊</div>
        <div class="chatList_scrollBox">
          <div class="modalContent chatList_scroll">
            <div class="modalContentList _panel-box">
              <!-- 朋友 -->
              <div class="friend_lists">
                <div class="header_img">
                  <img src="image/default_user_pic.png" width="40px" height="40px">
                </div>
                <div class="msg-wrapper right">
                  <p class="msg-left-white">晚上过来吃饭？</p>
                </div>
              </div>
              <!-- 自己 -->
              <div class="me_lists">
                <div class="header_img">
                  <img src="image/default_user_pic.png" width="40px" height="40px">
                </div>
                <div class="msg-wrapper left">
                  <p class="msg-right-green">好的，没问题！时间地点？</p>
                </div>
              </div>
              <!-- 朋友 -->
              <div class="friend_lists">
                <div class="header_img">
                  <img src="image/default_user_pic.png" width="40px" height="40px">
                </div>
                <div class="msg-wrapper right">
                  <p class="msg-left-white">晚上过来吃饭？</p>
                </div>
              </div>
              <!-- 自己 -->
              <div class="me_lists">
                <div class="header_img">
                  <img src="image/default_user_pic.png" width="40px" height="40px">
                </div>
                <div class="msg-wrapper left">
                  <p class="msg-right-green">好的，没问题！时间地点？</p>
                </div>
              </div>
              <!-- 朋友 -->
              <div class="friend_lists">
                <div class="header_img">
                  <img src="image/default_user_pic.png" width="40px" height="40px">
                </div>
                <div class="msg-wrapper right">
                  <p class="msg-left-white">晚上过来吃饭？</p>
                </div>
              </div>
              <!-- 自己 -->
              <div class="me_lists">
                <div class="header_img">
                  <img src="image/default_user_pic.png" width="40px" height="40px">
                </div>
                <div class="msg-wrapper left">
                  <p class="msg-right-green">好的，没问题！时间地点？</p>
                </div>
              </div>
            </div>
  
          </div>
        </div>
        <!-- 操作模块 -->
        <div class="chat_operation">
          <textarea rows="2"></textarea>
          <div class="operationBox">
            <button class="btn btn-primary mr30 startRecording" style="background-color: #d8a315;border: none;">语音</button>
            <button class="btn btn-primary stopRecording mr30 none" style="background-color: #00c4c2;border: none;"
              disabled>停止</button>
            <button class="btn btn-primary" style="background-color: #00c4c2;border: none;" id="chatSendBtn">发送</button>

            <ul class="none" id="recordingslist"></ul>
            <pre class="none" id="log"></pre>
            <audio id="sound" width="200" controls="controls" autoplay="autoplay" class="none"></audio>
          </div>
        </div>
        <a href="javascript:;" class="cd-popup-close closeModal"></a>

      </div>
    </div>

    <!-- 正在录音框 -->
    <div id="record" class="rp">
      <div style="width:100%;height: 35%;"></div>
      <div class="rprogress">
        <div class="rschedule"></div>
      </div>
      <br>
      <div id="rtime" class="rtime none">00:00:00</div><br>
      <div class="stop stopRecording"></div>
    </div>


    <script src="/chat/js/sound.js"></script>
  </div>
</body>

</html>
